<template>
  <div style="display: flex;align-items: center">
    <span class="op-name">{{letter(i)}}:</span>
    <p v-if="option.type==='0'" v-html="option.content"></p>
    <word-audio v-else-if="option.type==='2'" :word="option.content"></word-audio>
    <el-image v-else fit="contain" :preview-src-list="picList"
              :src="baseUrl+option.content"></el-image>
  </div>
</template>

<script>

  import {letter} from "@/util/function"
  import WordAudio from "@/components/wordAudio"

  export default {
    name: "optionContent",
    components: {WordAudio},
    props: ['option', 'i', 'opList'],
    methods: {
      letter,
    },
    computed: {
      picList() {
        return this.opList.map(item => this.baseUrl + item.content);
      }
    },
  }
</script>

<style scoped>
  .op-name {
    margin-right: 10px;
  }

  .el-image {
    width: 100px;
    height: 50px;
  }

</style>
